<template>
  <div>
    <div class="search-header">
      <span>搜索用户数</span>
      <svg t="1644686367286" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2049" width="16" height="16"><path d="M512 96c-229.76 0-416 186.24-416 416s186.24 416 416 416 416-186.24 416-416-186.24-416-416-416zM577.248 665.056c-31.392 47.136-63.328 83.456-117.056 83.456-36.672-5.984-51.744-32.256-43.808-59.04l69.12-228.928c1.696-5.6-1.12-11.584-6.24-13.408-5.088-1.792-15.072 4.832-23.712 14.304l-41.792 50.272c-1.12-8.448-0.128-22.4-0.128-28.032 31.392-47.136 82.976-84.32 117.952-84.32 33.248 3.392 48.992 29.984 43.2 59.2l-69.6 230.048c-0.928 5.184 1.824 10.464 6.528 12.128 5.12 1.792 15.872-4.832 24.544-14.304l41.76-50.24c1.12 8.448-0.768 23.232-0.768 28.864zM567.936 366.048c-26.432 0-47.872-19.264-47.872-47.616s21.44-47.584 47.872-47.584 47.872 19.264 47.872 47.584c0 28.384-21.44 47.616-47.872 47.616z" p-id="2050" /></svg>
    </div>
    <div class="search-main">
      <span>12321</span><span>18.8</span>
      <span>
        <svg t="1644687628809" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3001" width="16" height="16"><path d="M960 704L512 256l-448 448z" fill="#d81e06" p-id="3002" /></svg>
        <svg t="1644687732835" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7287" width="16" height="16"><path d="M64 320l448 448 448-448z" fill="#1afa29" p-id="7288" /></svg>
      </span>
    </div>
    <div ref="charts" class="charts"></div>
    <div class="footer"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'LineChart',
  mounted() {
    const myEcharts = echarts.init(this.$refs.charts)
    myEcharts.setOption({
      xAxis: {
        // 成为折线图
        type: 'category',
        show: false
      },
      yAxis: {
        show: false
      },
      // 系列
      series: [{
        type: 'line',
        data: [12, 52, 33, 62, 47, 84, 23, 63, 17, 94, 41, 13, 77, 90, 24, 78],
        // 变成平滑曲线
        // smooth: true,
        // 拐点的样式 透明度
        itemStyle: {
          opacity: 0
        },
        // 线条的样式
        lineStyle: {
          color: 'skyblue'
        },
        // 填充颜色设置
        areaStyle: {
          color:
          // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'white' // 0% 处的颜色
              }, {
                offset: 1, color: 'skyblue' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
        }
      }],
      // 布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0
      }
    })
  }
}
</script>

<style scoped>
.search-header {
  display: flex;
  margin-right: 20px;
  align-item: center;
}
.search-header span{
  margin-right: 30px;
  /*color: #d9d9d9;*/
}
.search-main{
  margin-top: 10px;
}
.search-main span{
  margin-right:30px;
}

.charts {
  width: 100%;
  height: 60px;
  /*border: 1px solid black;*/
}
</style>
